<template>
<div class="login">
    <div class="content-wrap">
        <div class="account w1200">
            <div class="main reltive">
                <p class="main_title txtcolor ft36">欢迎登录</p>
                <div class="register-input reltive mt20">
                    <span class="register-item">账号</span>
                    <input type="text" class="input-main txtcolor ft14" maxlength="20" v-model="account_number" id="account">
                </div>
                <div class="register-input reltive mt20">
                    <span class="register-item">密码</span>
                    <input type="password" class="input-main txtcolor ft14" maxlength="16" v-model="password" id="pwd">
                </div>
                <div class="register-input reltive mt20">
                    <span class="register-item">验证码</span>
                    <!-- <input type="number" class="input-main txtcolor ft14" maxlength="6" v-model="code" id="code"> -->
                    <div class="code-box">
                        <input type="text" class="input-main txtcolor ft14" maxlength="6" v-model="code" id="code">
                        <button type='button' class="code-btn curPer" @click="sendCode">{{codetxt}}</button>
                    </div>
                </div>
                <div class="mt10">
                    <span class="register-item"></span>
                    <button class="register-button curPer radius4 white" @click="login">登录</button>
                    <div class="have-account ft14">
                        <router-link tag="span" class="baseColor" to="/forgetPwd" style="cursor:pointer">忘记密码</router-link>
                    </div>
                </div>
                <div class="right-tip ft14 mt10">
                    <p>还不是NB的用户？</p>
                    <p>立即注册，在全球领先的数字资产交易平台开始交易。</p>
                    <router-link :to="{ path: '/register'}">
                        <p class="baseColor mt20">免费注册</p>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
    export default {
        name: "login",
        data (){
            return{
                fullscreenLoading:true,
                account_number:'',
                password:'',
                code:'',
                down:false,
                timer:'',
                codetxt:'发送验证码'
            }
        },
		created (){
			this.account_number = this.$route.query.account_number || ''
		},
        methods:{
            sendCode() {
                var that = this;
                if(!that.account_number){
                   return this.$message('请输入账号!');
                }
                if(that.down){
                    return;
                }
                that.down = true;
                let data = { user_string: this.account_number, scene: "login" };
                this.axios({
                    url: "/api/sms_send",
                    method: "post",
                    data: data
                }).then(res => {
                    this.$message({ message: res.data.message,type: 'success'});
                    if(res.data.type=='ok'){
                        var time = 60;
                        that.timer = setInterval(function() {
                            that.codetxt = time + "秒";
                            if (time == 0) {
                                clearInterval(that.timer);
                                that.codetxt = "发送验证码";
                                that.down = false;
                                return;
                            }
                            time--;
                        }, 1000);
                    }else{
                        that.down = false;
                    }
                });
            },
            login(){
                let that = this;
                let account_number = this.$utils.trim(this.account_number);
                let password = this.$utils.trim(this.password);
                let code = this.$utils.trim(this.code);
                if(that.account_number.length == ''){
                    return that.$message({message: '请输入账号!',type: 'warning'});
                }
                if(that.password.length<6){
                    return that.$message({message: '密码不能小于六位!',type: 'warning'});
                }
                const Loading = that.openLoading();//loading层
                that.axios.post('/api/user/login',{
                    user_string: account_number,
                    password : password,
                    sms_code: code,
                }).then(res=>{
                    Loading.close();
                    res = res.data;
                   	if(res.type == 'ok'){
                        localStorage.setItem('token',res.message);
                        that.$store.dispatch("changeToken",res.message);
                        localStorage.setItem('accountNum',account_number);
                        that.$router.push('/');
					}else{
                        that.$message(res.message);
					}
                }).catch(error=>{
					console.log(error)
				})
            }
        },
    }
</script>

<style scoped>
	.content-wrap{background: url(../../static/img/bg_login.png) center bottom 316px repeat-x,-webkit-linear-gradient(top,#21263f,#262a42);}
	.account{padding-top: 93px;overflow: hidden;min-height: 880px;}
	.main{padding: 0 0 60px 30px;}
    .register-item{display: block;height:22px;}
	.input-main{width: 520px;min-height: 46px;border: 1px solid #4e5b85;padding: 0 20px;border-radius: 3px;background-color: #1e2235; }
	.icon{width: 48px;height: 48px;line-height: 48px;border-right: 1px solid #52688c;position: absolute;top: 0;}
    .register-button{width:200px;display: inline-block;line-height: 46px;background-color: #7a98f7;border: none}
    .have-account{display:inline-block;margin-left: 30px}
    .right-tip{position: absolute;left: 620px;top: 70px;line-height: 24px;padding-right: 50px;color: #61688a;}
    .code-box {
      width: 520px;
      height: 46px;
      background-color: #1e2235;
      border: 1px solid #4e5b85;
    }
    .code-box input {
        border: none;
        height: 44px;
        min-height: 44px;
        width: 420px;
      }
    .code-box button {
        border: none;
        line-height: 43px;
        width: 93px;
        color: #c7cce6;
        border-left: 1px solid #4e5b85;
        background: #1e2235;
    }
</style>
>

